<script>
import {inject, ref} from 'vue'

export default {
  name: 'StarHorseFormList',
  props: {
    fieldList: {type: Array, required: true},
    rules: {type: Object, required: true}
  },
  setup() {
    const dataForm = inject('dataForm')
    const commonFunction = inject('commonFunction')
    if (!dataForm['batchDataList']) {
      dataForm['batchDataList'] = [{}]
    }
    const loading = ref(null)
    return {
      loading,
      dataForm,
      commonFunction
    }
  },
  methods: {
    handleAddDetails(row, type) {
      if (type === 1) {
        let obj = {}
        this.dataForm['batchDataList'].push(obj)
      } else {
        this.dataForm['batchDataList'].splice(row.xh - 1, 1)
      }
    },
    rowClassName({row, rowIndex}) {
      row.xh = rowIndex + 1
    },
    //单选框选中数据
    handleDetailSelectionChange(selection) {
      if (selection.length > 1) {
        this.$refs.tb.clearSelection()
        this.$refs.tb.toggleRowSelection(selection.pop())
      } else {
        console.log(selection)
        // this.checkedDetail = selection;
      }
    }
  }
}
</script>

<style scoped>
</style>
<template>
  <el-form
      :model = "dataForm"
      :rules = "rules"
      class = "data-form"
      ref = "starHorseFormRef"
  >
    <el-table
        v-loading = "loading"
        :data = "dataForm['batchDataList']"
        fit = "true"
        border
        :row-class-name = "rowClassName"
        @selection-change = "handleDetailSelectionChange"
        ref = "tb"
    >
      <el-table-column
          type = "selection"
          fixed = "left"
          width = "50"
          align = "center"
          v-if = "false"
      />
      <el-table-column
          label = "序号"
          align = "center"
          prop = "xh"
          width = "50"
      ></el-table-column>

      <template v-for = "item in fieldList">
        <el-table-column
            :prop = "item.fieldName"
            :label = "item.label"
            :min-width = "item.minWidth + 'px'"
            v-if = "item.formShow"
        >
          <template #default = "scope">
            <el-form-item
                v-if = "item.func"
                :required = "item.required"
                :rules = "rules[item.fieldName]"
                :prop = "
                                'batchDataList.' +
                                scope.$index +
                                '.' +
                                item.fieldName
                            "
            >
              <el-input
                  v-if = "item.type == 'textarea'"
                  type = "textarea"
                  clearable
                  v-model = "scope.row[item.fieldName]"
                  :placeholder = "'请输入' + item.label"
                  @[item.func.type] = "
                                    commonFunction(item.func.name, scope.row)
                                "
              ></el-input>

              <el-input-number
                  v-else-if = "item.type == 'number'"
                  clearable
                  v-model = "scope.row[item.fieldName]"
                  :placeholder = "'请输入' + item.label"
                  @[item.func.type] = "
                                    commonFunction(item.func.name, scope.row)
                                "
              ></el-input-number>

              <el-select
                  v-else-if = "item.type == 'select'"
                  clearable
                  v-model = "scope.row[item.fieldName]"
                  :placeholder = "'请选择' + item.label"
                  @[item.func.type] = "
                                    commonFunction(item.func.name, scope.row)
                                "
              >
                <el-option
                    v-for = "sitem in item.optionList"
                    :value = "sitem.value"
                    :label = "sitem.name"
                    :key = "sitem.value"
                />
              </el-select>
              <el-date-picker
                  v-else-if = "item.type == 'date'"
                  clearable
                  v-model = "scope.row[item.fieldName]"
                  type = "date"
                  :placeholder = "'请选择' + item.label"
                  @[item.func.type] = "
                                    commonFunction(item.func.name, scope.row)
                                "
              >
              </el-date-picker>
              <el-input
                  v-else
                  clearable
                  v-model = "scope.row[item.fieldName]"
                  :placeholder = "'请输入' + item.label"
                  @[item.func.type] = "
                                    commonFunction(item.func.name, scope.row)
                                "
              ></el-input>
            </el-form-item>
            <el-form-item
                v-else
                :required = "item.required"
                :rules = "rules[item.fieldName]"
                :prop = "
                                'batchDataList.' +
                                scope.$index +
                                '.' +
                                item.fieldName
                            "
            >
              <el-input
                  v-if = "item.type == 'textarea'"
                  type = "textarea"
                  clearable
                  v-model = "scope.row[item.fieldName]"
                  :placeholder = "'请输入' + item.label"
              ></el-input>

              <el-input-number
                  v-else-if = "item.type == 'number'"
                  clearable
                  v-model = "scope.row[item.fieldName]"
                  :placeholder = "'请输入' + item.label"
              ></el-input-number>

              <el-select
                  v-else-if = "item.type == 'select'"
                  clearable
                  v-model = "scope.row[item.fieldName]"
                  :placeholder = "'请选择' + item.label"
              >
                <el-option
                    v-for = "sitem in item.optionList"
                    :value = "sitem.value"
                    :label = "sitem.name"
                    :key = "sitem.value"
                />
              </el-select>
              <el-date-picker
                  v-else-if = "item.type == 'date'"
                  clearable
                  v-model = "scope.row[item.fieldName]"
                  type = "date"
                  :placeholder = "'请选择' + item.label"
              >
              </el-date-picker>
              <el-input
                  v-else
                  clearable
                  v-model = "scope.row[item.fieldName]"
                  :placeholder = "'请输入' + item.label"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </template>
      <el-table-column fixed = "right" label = "操作" min-width = "150px">
        <template #header = "scope">
          <span>操作</span>&nbsp;&nbsp;
          <el-button
              v-if = "dataForm['batchDataList']?.length == 1"
              @click = "handleAddDetails(scope.row, 1)"
              link
              size = "mini"
              type = "primary"
          >
            <el-tooltip content = "添加一行">
              <user-icon
                  icon = "plus"
                  style = "vertical-align: middle; color: #409eff"
              />
            </el-tooltip>
          </el-button>
        </template>
        <template #default = "scope">
          <el-button
              v-if = "
                            dataForm['batchDataList']?.length == scope.row['xh']
                        "
              @click = "handleAddDetails(scope.row, 1)"
              link
              size = "mini"
              type = "primary"
          >
            <el-tooltip content = "添加一行">添加</el-tooltip>
          </el-button>
          <el-button
              @click = "handleAddDetails(scope.row, 2)"
              link
              size = "mini"
              type = "danger"
          >
            <el-tooltip content = "删除当前行">删除</el-tooltip>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>